<template>
  <section id="Menu">
    <iLayout left>
      <section slot="title">菜单管理</section>
      <section slot="operation">
        <el-button type="primary" size="mini" icon="el-icon-plus" round @click="addMenu">新建菜单</el-button>
        <el-button type="danger" size="mini" icon="el-icon-delete" round :disabled="!menu.form.menuName" @click="delMenu">删除菜单</el-button>
        <el-button type="warning" size="mini" icon="el-icon-edit" round :disabled="!menu.form.menuName" @click="editMenu">修改菜单</el-button>
      </section>
      <section slot="left">
        <iTree :data="tree.data" :props="menu.props" @handleNodeClick="treeNodeClick"></iTree>
      </section>
      <section slot="right">
        <section class="form">
          <section class="form-title">{{ form_title }}</section>
          <section class="form-body">
            <el-form ref="menuForm" :model="menu.form" :rules="menu.rules">
              <el-form-item label="菜单名称" prop="menuName">
                <el-input type="text" v-model="menu.form.menuName" placeholder="点击此处输入菜单名称" :readonly="!isModify && !isAdd"></el-input>
              </el-form-item>
              <el-form-item label="路由地址" prop="path">
                <el-input type="text" v-model="menu.form.path" placeholder="点击此处输入路由地址" :readonly="!isModify && !isAdd"></el-input>
              </el-form-item>
              <el-form-item label="菜单图标" prop="icon">
                <el-input type="text" v-model="menu.form.icon" placeholder="点击此处输入菜单图标" :readonly="!isModify && !isAdd"></el-input>
              </el-form-item>
              <el-form-item label="菜单权限字符" prop="perms">
                <el-input type="text" v-model="menu.form.perms" placeholder="点击此处输入菜单权限字符" :readonly="!isModify && !isAdd"></el-input>
              </el-form-item>
              <el-form-item label="菜单是否展示在web端" prop="visible">
                <el-select v-model="menu.form.visible" placeholder="请选择" class="w100">
                  <el-option v-for="item in visibleSelect" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>  
                </el-select>
              </el-form-item>
              <el-form-item label="备注">
                <el-input type="textarea" v-model="menu.form.remark" resize="none" :readonly="!isModify && !isAdd" placeholder="点击此处输入备注信息"></el-input>
              </el-form-item>
            </el-form>
          </section>
          <section class="form-action" v-if="isModify || isAdd">
            <el-button type="default" icon="el-icon-close" round @click="cancel"></el-button>
            <el-button type="primary" icon="el-icon-check" round @click="confirm"></el-button>
          </section>
        </section>
      </section>
    </iLayout>

    <el-dialog :visible.sync="isDelete" title="删除菜单" width="30%">
      该操作将删除菜单：<el-tag type="danger">{{ menu.form.menuName }}</el-tag>，您确认删除该菜单吗？
      <span slot="footer" class="dialog-footer">
        <el-button type="default" round icon="el-icon-close" @click="cancel"></el-button>
        <el-button type="primary" round icon="el-icon-check" @click="confirm"></el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
import * as api from '../../api/private/menu'
export default {
  name: 'Menu',
  data: () => ({
    tree: {
      data: []
    },
    menu: {
      pid: '',
      props: {
        children: 'children',
        label: 'menuName'
      },
      form: {},
      rules: {
        menuName: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
        path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
        icon: [{ required: true, message: '菜单图标不能为空', trigger: 'blur' }],
        perms: [{ required: true, message: '菜单权限字符不能为空', trigger: 'blur' }],
        visible: [{ required: true, message: '菜单是否暂时在Web端必须选择', trigger: 'blur' }]
      }
    },
    visibleSelect: [
      { label: '显示', value: 0 },
      { label: '隐藏', value: 1 }
    ],
    form_title: '菜单信息',
    isAdd: false,
    isModify: false,
    isDelete: false
  }),
  methods: {
    async getMenu() {
      const data = await api.getMenu()
      if (data.code === 0) {
        this.tree.data = data.data
      } else {
        this.$msg.error(data.msg)
      }
    },
    treeNodeClick(data) {
      this.isAdd = false
      this.isModify = false
      this.isDelete = false
      this.menu.pid = data.data.id
      this.menu.form = data.data
    },
    confirm() {
      if (this.isAdd) {
        this.confirmAddMenu()
      }
      if (this.isModify) {
        this.confirmModifyMenu()
      }
      if (this.isDelete) {
        this.confirmDeleteMenu()
      }
    },
    cancel() {
      this.form_title = '菜单信息'
      if (this.isAdd) {
        this.cancelAddMenu()
      }
      if (this.isModify) {
        this.cancelModifyMenu()
      }
      if (this.isDelete) {
        this.cancelDeleteMenu()
      }
    },
    addMenu() {
      this.menu.form = {}
      this.isAdd = true
      this.isModify = false
      this.isDelete = false
    },
    confirmAddMenu() {
      this.$refs.menuForm.validate(async valid => {
        if (valid) {
          this.menu.form.pid = this.menu.pid
          const data = await api.addMenu(this.menu.form)
          if (data.code === 0) {
            this.$msg.success(`菜单新建成功`)
            this.cancel()
            this.getMenu()
          } else {
            this.$msg.error(`菜单新建失败，${data.msg}`)
          }
        }
      })
    },
    cancelAddMenu() {
      this.isAdd = false
      this.menu.form = {}
    },
    delMenu() {
      this.isAdd = false
      this.isModify = false
      this.isDelete = true
    },
    async confirmDeleteMenu() {
      const data = await api.delMenu([`${this.menu.form.id}`])
      if (data.code === 0) {
        this.$msg.success(`菜单删除成功`)
        this.cancel()
        this.getMenu()
      } else {
        this.$msg.error(`菜单删除失败，${data.msg}`)
      }
    },
    cancelDeleteMenu() {
      this.isDelete = false
    },
    editMenu() {
      this.isAdd = false
      this.isModify = true
      this.isDelete = false
    },
    confirmModifyMenu() {
      this.$refs.menuForm.validate(async valid => {
        if (valid) {
          const data = await api.editMenu(this.menu.form)
          if (data.code === 0) {
            this.$msg.success(`菜单修改成功`)
            this.cancel()
            this.getMenu()
          } else {
            this.$msg.error(`菜单修改失败，${data.msg}`)
          }
        }
      })
    },
    cancelModifyMenu() {
      this.isModify = false
    }
  },
  created() {
    this.getMenu()
  }
}
</script>

<style lang="scss" scoped>
#Menu {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  .list {
    width: 100%;
    box-sizing: border-box;

    .list-item {
      transition: all 0.1s ease-in-out;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.5rem;
      margin-bottom: 0.5rem;
      border-radius: 0.25rem;
      font-size: 1.05rem;
      cursor: pointer;
      font-weight: bold;

      &:hover {
        box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.3), 0 -0.05rem 0.1rem rgba(0, 0, 0, 0.15);

        & > .list-item-name {
          margin-right: 1rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        & > .list-item-action {
          display: inline;
        }
      }

      .list-item-name {
        flex: 1;
      }

      .list-item-action {
        display: none;
      }
    }

    .text-center {
      justify-content: center;
    }
  }

  .form {
    width: 30rem;
    padding: 0.5rem;
    border-radius: 0.25rem;
    margin: 3rem auto;
    box-sizing: border-box;

    .form-title {
      width: 100%;
      font-size: 1.5rem;
      margin: 2rem 0;
    }

    .form-body {
    }

    .form-action {
      margin-top: 3rem;
      display: flex;
      justify-content: center;
    }
  }
}
</style>
